<template>
    <view
        class="tui-navigation-bar"
        :class="{
            'tui-bar-line': opacity > 0.85 && splitLine,
            'tui-navbar-fixed': isFixed,
            'tui-backdrop__filter': backdropFilter && dropDownOpacity > 0
        }"
        :style="{
            height: height + 'px',
            backgroundColor: `rgba(${background},${opacity})`,
            opacity: dropDownOpacity,
            zIndex: isFixed ? zIndex : 'auto'
        }"
    >
        <view class="status_bar"> </view>
        <view
            class="tui-status-bar"
            :style="{ height: statusBarHeight + 'px' }"
            v-if="isImmersive"
        ></view>
        <view
            class="tui-navigation_bar-title"
            :style="{
                opacity: transparent || opacity >= maxOpacity ? 1 : opacity,
                color: color,
                paddingTop: top - statusBarHeight + 'px'
            }"
            v-if="title && !isCustom"
        >
            {{ title }}
        </view>
        <view style="height: 100%" class="tui-nav-content flex align-center">
            <slot />
        </view>
    </view>
</template>

<script>
export default {
    name: 'tuiNavigationBar',
    props: {
        //NavigationBar标题
        title: {
            type: String,
            default: ''
        },
        //NavigationBar标题颜色
        color: {
            type: String,
            default: '#333'
        },
        //NavigationBar背景颜色,不支持rgb
        backgroundColor: {
            type: String,
            default: '#fff'
        },
        //是否需要分割线
        splitLine: {
            type: Boolean,
            default: false
        },
        //是否设置不透明度
        isOpacity: {
            type: Boolean,
            default: false
        },
        //不透明度最大值 0-1
        maxOpacity: {
            type: [Number, String],
            default: 1
        },
        //背景透明 【设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效】
        transparent: {
            type: Boolean,
            default: false
        },
        //滚动条滚动距离
        scrollTop: {
            type: [Number, String],
            default: 0
        },
        /*
			 isOpacity 为true时生效
			 opacity=scrollTop /windowWidth * scrollRatio
			*/
        scrollRatio: {
            type: [Number, String],
            default: 0.3
        },
        //是否自定义header内容
        isCustom: {
            type: Boolean,
            default: false
        },
        //是否沉浸式
        isImmersive: {
            type: Boolean,
            default: true
        },
        isFixed: {
            type: Boolean,
            default: false
        },
        //是否开启高斯模糊效果[仅在支持的浏览器有效果]
        backdropFilter: {
            type: Boolean,
            default: false
        },
        //下拉隐藏NavigationBar，主要针对有回弹效果ios端
        dropDownHide: {
            type: Boolean,
            default: false
        },
        //z-index设置
        zIndex: {
            type: [Number, String],
            default: 9998
        }
    },
    watch: {
        scrollTop(newValue, oldValue) {
            if (this.isOpacity && !this.transparent) {
                this.opacityChange()
            }
        },
        backgroundColor(val) {
            if (val) {
                this.background = this.hexToRgb(val)
            }
        }
    },
    data() {
        return {
            width: 375, //header宽度
            left: 375, //小程序端 左侧距胶囊按钮距离
            height: 44, //header高度
            top: 0,
            scrollH: 1, //滚动总高度,计算opacity
            opacity: 0, //0-1
            statusBarHeight: 0, //状态栏高度
            background: '255,255,255', //header背景色
            dropDownOpacity: 1
        }
    },
    created() {
        this.dropDownOpacity = this.backdropFilter && 0
        this.opacity = this.isOpacity || this.transparent ? 0 : this.maxOpacity
        this.background = this.hexToRgb(this.backgroundColor)
        let obj = {}
        // #ifdef MP-WEIXIN
        obj = wx.getMenuButtonBoundingClientRect()
        // #endif
        // #ifdef MP-BAIDU
        obj = swan.getMenuButtonBoundingClientRect()
        // #endif
        // #ifdef MP-ALIPAY
        my.hideAddToDesktopMenu()
        // #endif
        uni.getSystemInfo({
            success: res => {
                this.statusBarHeight = res.statusBarHeight
                this.width = res.windowWidth
                this.left = obj.left || res.windowWidth
                if (this.isImmersive) {
                    this.height = obj.top
                        ? obj.top + obj.height + 8
                        : res.statusBarHeight + 44
                }
                this.scrollH = res.windowWidth * this.scrollRatio
                this.top = obj.top
                    ? obj.top + (obj.height - 32) / 2
                    : res.statusBarHeight + 6
                this.$emit('init', {
                    width: this.width,
                    height: this.height,
                    left: this.left,
                    top: this.top,
                    statusBarHeight: this.statusBarHeight,
                    opacity: this.opacity,
                    windowHeight: res.windowHeight
                })
            }
        })
    },
    methods: {
        hexToRgb(hex) {
            let rgb = '255,255,255'
            if (hex && ~hex.indexOf('#')) {
                if (hex.length === 4) {
                    let text = hex.substring(1, 4)
                    hex = '#' + text + text
                }
                let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
                    hex
                )
                if (result) {
                    rgb = `${parseInt(result[1], 16)},${parseInt(
                        result[2],
                        16
                    )},${parseInt(result[3], 16)}`
                }
            }
            return rgb
        },
        opacityChange() {
            if (this.dropDownHide) {
                if (this.scrollTop < 0) {
                    if (this.dropDownOpacity > 0) {
                        this.dropDownOpacity = 1 - Math.abs(this.scrollTop) / 30
                    }
                } else {
                    this.dropDownOpacity = 1
                }
            }

            let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop
            let opacity = scroll / this.scrollH
            if (
                (this.opacity >= this.maxOpacity &&
                    opacity >= this.maxOpacity) ||
                (this.opacity == 0 && opacity == 0)
            ) {
                return
            }
            this.opacity = opacity > this.maxOpacity ? this.maxOpacity : opacity
            if (this.backdropFilter) {
                this.dropDownOpacity =
                    this.opacity >= this.maxOpacity ? 1 : this.opacity
            }
            this.$emit('change', {
                opacity: this.opacity
            })
        }
    }
}
</script>

<style scoped>
.status_bar {
    height: var(--status-bar-height);
    width: 100%;
}

.tui-navigation-bar {
    width: 100%;
    transition: opacity 0.4s;
}
.tui-backdrop__filter {
    /* Safari for macOS & iOS */
    -webkit-backdrop-filter: blur(15px);
    /* Google Chrome */
    backdrop-filter: blur(15px);
}

.tui-navbar-fixed {
    position: fixed;
    left: 0;
    top: 0;
}

.tui-status-bar {
    width: 100%;
}

.tui-navigation_bar-title {
    width: 100%;
    font-size: 17px;
    line-height: 17px;
    /* #ifndef APP-PLUS */
    font-weight: 500;
    /* #endif */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tui-bar-line::after {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
}
</style>
